<template>
  <h1>计算器练习</h1>
  <input  placeholder="请输入数值1" v-model="a"><br>
  <input  placeholder="请输入数值2" v-model="b"><br>
  <button @click="calc('+')" >加</button>
  <button @click="calc('-')">减</button>
  <button @click="calc('*')">乘</button>
  <button @click="calc('/')">除</button>
  <h3>运算结果:{{result}} </h3>
</template>

<script setup>
import {ref} from "vue";
//定义响应变量,用于接收输入框输入的数据
const a = ref('');
const b = ref('');
const result = ref('');
const calc = (o)=>{
  //eval("5+2"); 结果为7 将字符串形式的算式以JS的方式进行运算
  //将运算结果赋值给result响应式变量,再以插值的方式显示在h4中
  result.value = eval(a.value+o+b.value);
}
</script>

<style scoped>

</style>